<script setup>
import "@material/web/focus/md-focus-ring.js";
const props = defineProps(["anchor"]);
</script>

<template>
  <div class="nav-link" role="presentation">
    <a :href="'#' + props.anchor" :id="props.anchor">
      <slot></slot>
      <md-focus-ring></md-focus-ring>
    </a>
  </div>
</template>

<style>
.nav-link {
  display: block;
  width: 100%;
}

.nav-link a {
  color: inherit;
  text-decoration: none;
  position: relative;
  outline: none;
  --md-focus-ring-shape: 4px;
  display: inline-block;
  width: 100%;
}

.nav-link a:hover {
  text-decoration: underline 2px;
}

.nav-link a:hover:before {
  content: "#";
  position: absolute;
  transform: translateX(calc(-.3rem + -100%));
  bottom: 0;
  font-size: var(--md-sys-typescale-body-large-font-size);
  opacity: 0.8;
}
</style>